<template>
  <div class="about">
      <h1>资讯</h1>
      <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 item" v-for="(s,i) in songList" :key="i">
        <img :src="s.album_500_500" alt="s.album_title">
        <h4>{{s.album_title}}</h4>
        <h5>{{s.author}}</h5>
      </div>
      <button @click="add" class="btn btn-danger btn-block">加载更多</button>
  </div>
</template>

<script>
import { getMusicData } from '../services/music';

export default {
  name: 'News',
  data() {
    return {
      size: 10,
      offset: 0,
      songList: [],
    };
  },
  created() {
    getMusicData({
      method: 'baidu.ting.billboard.billList',
      type: 1,
      size: this.size,
      offset: this.offset,
    })
    .then((res) => {
      console.log(res);
      // this.songList = res.data.song_list;
      this.songList = this.songList.concat(res.data.song_list);
    });
  },
  methods: {
    add() {
      this.offset += 10;
      // this.size += 10;
      getMusicData({
        method: 'baidu.ting.billboard.billList',
        type: 1,
        size: this.size,
        offset: this.offset,
      })
    .then((res) => {
      console.log(res);
      // this.songList = res.data.song_list;
      this.songList = this.songList.concat(res.data.song_list);
    });
    },
  },
};
</script>

<style>
.item,.item h4,h5{
  text-align: center;
}
.item h5{
  color: red;
}
.item img{
  width: 100px;
}
.item{
  height: 200px;
}
</style>